<template>
    <div class="box">
        <header class="header">
            <van-nav-bar title="登录" left-arrow @click-left="$router.go(-1)" />
        </header>
        <div class="content">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" name="username" label="用户名" placeholder="用户名" :rules="[
                        { required: true, message: '请填写用户名' },
                        { pattern: /^1(3|4|5|6|7|8)\d{9}$/, message: '请输入正确的手机号' }
                    ]" />
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                        <template #button>
                            <van-button size="small" type="primary" @click="sendCode" :disabled="msg != '发送验证码'">{{ msg
                                }}</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
            <van-row justify="space-between" style="text-align: center;">
                <van-col span="12">忘记密码</van-col>
                <van-col span="12" @click="$router.push('/register')">快速注册</van-col>
            </van-row>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue'
import request from '@/utils/request'
import { showSuccessToast, showFailToast } from 'vant'
import { useRouter } from 'vue-router'
export default {
    setup() {
        const router = useRouter()
        const username = ref('')
        const password = ref('')
        const sms = ref('')
        const msg = ref('发送验证码')
        const count = ref(10)
        const timer = ref(null) // 10s倒计时定时器
        const timer2 = ref(null) // 定时3秒显示验证码
        const onSubmit = (values) => {
            console.log(values, 'values')
            request.post('/login', values).then(res => {
                if (res.data.code == 200) {
                    // 弹框提示登录成功
                    showSuccessToast(res.data.message);
                    // 存储token
                    localStorage.setItem('token', res.data.token)
                    // 存储用户名
                    localStorage.setItem('username', username.value) // values.username
                    // 跳转到首页
                    router.push('/')
                } else {
                    // 弹框提示登录失败
                    showFailToast(res.data.message)
                }
            })
        }
        const sendCode = () => {
            sms.value = ''
            timer.value = setInterval(() => {
                count.value--
                if (count.value == 0) {
                    clearInterval(timer.value)
                    msg.value = '发送验证码'
                    count.value = 10
                } else {
                    msg.value = count.value + '秒后重试'
                }
            }, 1000)
            timer2.value = setInterval(() => {
                // js随机生成六位数
                sms.value = Math.floor(Math.random() * 900000 + 100000)
                clearInterval(timer2.value)
            }, 3000)
        }
        return {
            username,
            password,
            sms,
            msg,
            count,
            timer,
            onSubmit,
            sendCode
        }
    }
}
</script>